<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="menuForm">
      <el-form-item>
        <el-button @click="addMenu" v-if="hasPermission(['system:menu:save'])" type="primary">新增菜单</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="menuList"
      v-loading="loading"
      :indent="30"
      border
      row-key="value"
      style="width: 100%;">
      <!--<el-table-column-->
        <!--prop="value"-->
        <!--align="center"-->
        <!--width="150"-->
        <!--label="ID">-->
      <!--</el-table-column>-->

      <el-table-column
        prop="label"
        header-align="center"
        align="center"
        width="150"
        label="名称">
      </el-table-column>



      <el-table-column
        align="center"
        header-align="center"
        label="图标">
        <template slot-scope="scope">
          <icon-svg :name="scope.row.icon || ''"></icon-svg>
        </template>
      </el-table-column>

      <el-table-column
        prop="type"
        align="center"
        header-align="center"
        label="类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
          <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="parent_name"
        align="center"
        header-align="center"
        width="120"
        label="上级菜单">
      </el-table-column>

      <el-table-column
        header-align="center"
        align="center"
        prop="sort"
        width="80"
        label="排序">
      </el-table-column>

      <el-table-column
        prop="url"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="菜单URL">
      </el-table-column>

      <el-table-column
        prop="permissions"
        header-align="center"
        align="center"
        width="150"
        :show-overflow-tooltip="true"
        label="权限标识">
      </el-table-column>

      <el-table-column
        header-align="center"
        align="center"
        min-width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click="updateMenu(scope.row.value)"
            size="small"
            v-if="hasPermission(['system:menu:update'])"
            type="warning" icon="el-icon-edit">修改</el-button>
          <el-button
            @click="deleteById(scope.row)"
            size="small"
            v-if="hasPermission(['system:menu:deleteById'])"
            type="danger" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <menu-form
      :showFlag="showFlag"
      @closeDialog="closeDialog"
      @close="closeForm"
      :formData="menuForm">
    </menu-form>
  </div>
</template>

<script>
  import menuForm from '@/components/system/menu-form'
  export default {
    components: {
      menuForm
    },
    data () {
      return {
        showFlag: false,
        loading: true,
        menuForm: {
          create_type: 2,
          name: '',
          url: '',
          type: 0,
          permissions: '',
          parentArrayId: [],
          parent_id: '',
          sort: 0
        },
        menuList: [],
        currentPage: 1,
        pageSize: 10,
        totalCount: 0
      }
    },

    mounted () {
      this.getMenuList()
    },

    methods: {
      addMenu () {
        this.showFlag = true
      },
      getMenuList () {
        let that = this
        that.axios.get(that.$http.httpUrl('/system/menu/getMenuByParent'))
          .then(function (response) {
            that.loading = false
            that.menuList = response.data.data
          })
      },

      closeDialog () {
        this.showFlag = false
      },

      updateMenu (id) {
        let that = this
        that.axios.get(that.$http.httpUrl('/system/menu/findById'), {
          params: {
            id: id
          }
        }).then(function (response) {
          that.menuForm = response.data.data
          that.showFlag = true
        })
      },

      deleteById (item) {
        let that = this
        item.sqlId = 'system.common.deleteById'
        item.table = 'system_menu'
        that.$confirm('确定删除菜单' + item.label + '?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          if (item.create_type === 1) {
            this.$message.error('您不能删除系统内置菜单')
            return false
          }
          that.axios.delete(that.$http.httpUrl('/system/menu'), {
            data: item
          }).then(function (response) {
            if (response.data.code === 1) {
              that.$message({
                type: 'success',
                message: response.data.message
              })
              that.getMenuList()
            } else {
              that.$message({
                type: 'error',
                message: response.data.message
              })
            }
          })
        })
      },

      closeForm () {
        this.showFlag = false
        this.getMenuList()
        this.menuForm = {
          create_type: 2,
          name: '',
          url: '',
          type: 0,
          permissions: '',
          parentArrayId: [],
          parent_id: '',
          sort: 0
        }
      }
    }
  }
</script>

<style>
  .el-table__expand-icon {
    display: inline-block;
    margin-right: 15px;
    vertical-align:-5px;
  }

  /*.el-table [class*=el-table__row--level] .el-table__expand-icon {*/
    /*display: inline-block;*/
    /*width: 14px;*/
    /*vertical-align: middle;*/
    /*margin-right: 5px;*/
  /*}*/

  /*.el-table td div {*/
    /*box-sizing: border-box;*/
  /*}*/
  /*.el-table__expand-icon {*/
    /*position: relative;*/
    /*cursor: pointer;*/
    /*color: #666;*/
    /*transition: transform .2s ease-in-out;*/
    /*height: 20px;*/
  /*}*/
</style>
